import React, { useEffect } from 'react';
import { Link as RouterLink } from 'react-router-dom'
import { makeStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import red from '@material-ui/core/colors/red'
import WhatshotIcon from '@material-ui/icons/Whatshot';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import DescriptionIcon from '@material-ui/icons/Description';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  list: {
    width: '100%',
  },
  heading: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: theme.typography.pxToRem(15),
  },
  summaryContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  hotIcon: {
    color: red[600],
    marginRight: theme.spacing(1)
  }
}));

function ListArticleLink(props) {
  return (
    <ListItem button dense={true} component={RouterLink} to={props.url}>
      <ListItemAvatar>
        <Avatar>
          <DescriptionIcon />
        </Avatar>
      </ListItemAvatar>
      <ListItemText primary={props.title} secondary={props.author} />
    </ListItem>
  )
}

export default function HotArticlePanel() {
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState('today');

  const handleChange = (panel) => (event, isExpanded) => {
    setExpanded(isExpanded ? panel : false);
  };

  useEffect(() => {
    // TODO: get data from backend: Title author id and readNum
  })

  return (
    <div className={classes.root}>
      <Accordion
        expanded={expanded === 'today'}
        onChange={handleChange('today')}
        >
        <AccordionSummary
          classes={{ content: classes.summaryContent }}
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1bh-content"
          id="today-hot-header"
        >
          <WhatshotIcon color="primary" fontSize="small"
            classes={{ colorPrimary: classes.hotIcon }} />
          <Typography className={classes.heading}>
            今日热门
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <List className={classes.list}>
            <ListArticleLink title="JS Promise" author="黄良" url="/blog" />
            <ListArticleLink title="JS Promise" author="黄良" url="/blog" />
            <ListArticleLink title="JS Promise" author="黄良" url="/blog" />
          </List>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'yesterday'} onChange={handleChange('yesterday')}>
        <AccordionSummary
          classes={{ content: classes.summaryContent }}
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2bh-content"
          id="yesterday-hot-header"
        >
          <WhatshotIcon color="primary" fontSize="small"
            classes={{ colorPrimary: classes.hotIcon }} />
          <Typography className={classes.heading}>昨日热门</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <List className={classes.list}>
            <ListArticleLink title="JS Promise" author="黄良" url="/blog" />
          </List>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'pastWeek'} onChange={handleChange('pastWeek')}>
        <AccordionSummary
          classes={{ content: classes.summaryContent }}
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3bh-content"
          id="pastweek-hot-header"
        >
          <WhatshotIcon color="primary" fontSize="small"
            classes={{ colorPrimary: classes.hotIcon }} />
          <Typography className={classes.heading}>七天热门</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <List className={classes.list}>
            <ListArticleLink title="JS Promise" author="黄良" url="/blog" />
          </List>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}